<template>
  <div class="writecom">
    <div class="compop">
      <van-popup
        class="poup"
        v-model="comShow"
        :style="{ width: '80%', height: '80%' }"
      >
        <h3>请根据实际情况为企业打分</h3>
        <div class="xiangqing">
          <div class="item">
            <span class="left">岗位描述</span>
            <span
              ><van-rate :size="16" v-model="positionScore" color="#ffd21e"
            /></span>
          </div>
          <div class="item">
            <span class="left">面试情况</span>
            <span
              ><van-rate :size="16" v-model="viewScore" color="#ffd21e"
            /></span>
          </div>
          <div class="item item3">
            <span class="left">面试官</span>
            <span class="right"
              ><van-rate :size="16" v-model="viewerScore" color="#ffd21e"
            /></span>
          </div>
        </div>
        <!-- 职位选择 -->
        <div class="positions">
          <span>职位选择</span>
          <span class="select" ref="select" @click="openSelect"
            >点击选择面试职位</span
          >
        </div>
        <div class="line"></div>
        <!-- 留言 -->
        <div class="message">
          <van-field
            v-model="message"
            rows="6"
            autosize
            type="textarea"
            placeholder="请输入留言"
          />
        </div>
        <div class="line"></div>
        <div class="btn">
          <div class="btn-left">
            <van-button plain type="primary" @click="cancel">取消</van-button>
          </div>
          <div class="btn-right">
            <van-button plain type="primary" @click="onSubmit">提交</van-button>
          </div>
        </div>
      </van-popup>
    </div>
    <!-- 职位选择的弹框 -->
    <van-popup
      v-model="selectShow"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-picker
        show-toolbar
        :columns="columns"
        :default-index="2"
        @confirm="onConfirm"
        @cancel="onCancel"
    /></van-popup>
  </div>
</template>

<script>
import { companyPositions, addComment } from '@/api/api.js'
export default {
  data () {
    return {
      comShow: false,
      selectShow: false,
      value: 2.5,
      message: '', // 留言的内容
      columns: [],
      positionScore: 5, // 岗位描述
      viewScore: 5, // 面试情况
      viewerScore: 5, // 面试官
      positionsList: [], // 职位列表
      currentPosiId: 0, // 当前职位的id
      commentCotent: {} // 最后得到的评论数据
    }
  },
  async created () {
    // 调用职位的接口
    // console.log(this.$route.params.id)
    const res = await companyPositions({
      id: this.$route.params.id,
      limit: 100
    })
    console.log(res)
    this.positionsList = res.data.data.list
    this.positionsList.forEach((item, index) => {
      this.columns.push(item.name.split('G')[0])
      this.positionId = item.id
    })
    console.log(this.columns)
    console.log(this.positionId)
  },
  methods: {
    cancel () {
      console.log(1111)
      this.comShow = false
    },
    async openSelect () {
      this.selectShow = true
      // if (this.selectShow === true) {
      //   // 调用职位的接口
      //   // console.log(this.$route.params.id)
      //   const res = await positionFilters(this.$route.params.id)
      //   console.log(res)
      //   this.columns = res.data.data.types
      // }
    },
    // 提交
    async onSubmit () {
      this.positionsList.forEach(item => {
        if (item.name.includes(this.$refs.select.innerText)) {
          this.currentPosiId = item.id
        }
      })
      // 调接口
      const res = await addComment({
        content: this.message,
        interviewScore: this.viewScore,
        interviewerScore: this.viewerScore,
        positionScore: this.positionScore,
        position: this.currentPosiId,
        tags: []
      })

      this.commentCotent = res.data.data

      this.$emit('addComments', this.commentCotent)
      this.$toast.success('评论成功')
      this.comShow = false
    },

    // 确定按钮
    onConfirm (value) {
      // console.log('修改成功')

      this.$refs.select.innerText = value
      this.selectShow = false
    },
    // 取消按钮
    onCancel () {
      this.selectShow = false
    }
  }
}
</script>

<style lang="less" scoped>
.writecom {
  .compop {
    .poup {
      border-radius: 10px;
    }
    h3 {
      font-size: 18px;
      font-weight: 400;
      text-align: center;
      height: 60px;
      line-height: 80px;
    }
    .xiangqing {
      font-size: 14px;
      padding: 20px 45px;
      .item {
        margin-bottom: 15px;
        span {
          margin-right: 20px;
          // margin: 0 20px;
          text-align: center;
        }
        .left {
          text-align: left;
          padding-left: 5px;
        }
        .right {
          text-align: left;
        }
      }
      .item3 {
        .right {
          padding-left: 13px;
        }
      }
    }
    .positions {
      font-size: 14px;
      padding: 0px 45px;
      .select {
        margin-left: 30px;
        font-size: 12px;
        color: #c8cace;
        text-align: center;
      }
    }
    .line {
      margin-top: 15px;
      margin-left: 15px;
      height: 1px;
      width: 90%;
      background-color: #f7f4f5;
    }
    .message {
      margin-top: 20px;
      /deep/ .van-cell__value--alone {
        background-color: #f7f4f5;
        height: 150px;
        border-radius: 10px;
      }
      /deep/ .van-field__body {
        padding: 10px 15px;
      }
    }
    .btn {
      display: flex;
      margin-top: 15px;
      .btn-left,
      .btn-right {
        flex: 1;
        text-align: center;
        /deep/ .van-button--primary {
          border: 0px;
        }
      }
      .btn-left {
        /deep/ .van-button__text {
          color: #181a39 !important;
        }
      }
      .btn-right {
        /deep/ .van-button__text {
          color: #b4b4bd !important;
        }
      }
    }
  }
}
</style>
